<script setup>
import { reactive, ref, watch } from 'vue';
import { userInfoStore } from '/store';
import { computed } from 'vue';
const userStore = userInfoStore();
const hasLogin = ref(false);
hasLogin.value = userStore.isLogin();

// 获取全局变量的引用
const instance = getCurrentInstance();
const gProperties = instance.appContext.config.globalProperties;

const cartList = ref([]);
const total = ref(0); // 总价格
const allChecked = ref(true); //全选状态
const empty = ref(false); //空白页面
const numberChange = ref();

//计算总价格
const calcTotal = () => {
    let list = cartList.value;
    if (list.length === 0) {
        empty.value = true;
        return;
    }
    let total = 0;
    let checked = true;
    list.forEach((item) => {
        if (item.checked === true) {
            total += item.price * item.number;
        } else if (checked === true) {
            checked = false;
        }
    });
    allChecked.value = checked;
    total.value = Number(total.toFixed(2));
};

//请求数据
const loadData = async () => {
    let list = await gProperties.$api.json('cartList');
    let clist = list.map((item) => {
        item.checked = true;
        return item;
    });
    cartList.value = clist;
    console.log(clist);
    this.calcTotal(); //计算总价
};
loadData();

console.log('===cartList.loadData===');
console.log(cartList.value);
// 1. todo 界面响应函数，可以用一个state封装一下。同时使用 computed() 和 watch提升界面刷新的性能。

// const state = reactive({
//     editMode: false,
//     list: computed(() => cart.list),
//     selectedList: [],
//     selectedIds: computed(() => cart.selectedIds),
//     isAllSelected: computed(() => cart.isAllSelected),
//     totalPriceSelected: computed(() => cart.totalPriceSelected)
// });
// 声明周期方法
onShow((event) => {
    let login = userStore.isLogin();
    console.log('===cart.onShow===' + login);
    hasLogin.value = login;
});

const navToLogin = () => {
    uni.navigateTo({
        url: '/pages/login/login'
    });
};

const clearCart = () => {};
const onImageLoad = (url) => {};
watch(
    cartList,
    (newValue, oldValue) => {
        console.log('依赖值改变${oldValue}');
        let isEmpty = newValue.length === 0 ? true : false;
        if (empty.value !== isEmpty) {
            empty.value = isEmpty;
        }
    },
    { immediate: true, deep: true }
);

//订单
const createOrder = () => {
    let list = cartList.value;
    let goodsData = [];
    list.forEach((item) => {
        if (item.checked) {
            goodsData.push({
                attr_val: item.attr_val,
                number: item.number
            });
        }
    });

    uni.navigateTo({
        url: `/pages/order/createOrder?data=${JSON.stringify({
            goodsData: goodsData
        })}`
    });
    gProperties.$api.msg('跳转下一页 sendData');
};
</script>
<template>
    <view class="container">
        <view v-if="!hasLogin || empty === true" class="empty">
            <image src="/static/emptyCart.jpg" mode="aspectFit"></image>
            <view v-if="hasLogin" class="empty-tips">
                空空如也
                <navigator class="navigator" v-if="hasLogin" url="../index/index" open-type="switchTab">随便逛逛></navigator>
            </view>
            <view v-else class="empty-tips">
                空空如也
                <view class="navigator" @click="navToLogin">去登录></view>
            </view>
        </view>
        <view v-else>
            <!-- <view v-show="hasLogin"> -->
            <!-- 列表 -->
            <view class="cart-list">
                <block v-for="(item, index) in cartList" :key="item.id">
                    <view class="cart-item" :class="{ 'b-b': index !== cartList.length - 1 }">
                        <view class="image-wrapper">
                            <!-- // :src="item.image" -->
                            <image
                                src="@/static/temp/ad_duck_shop.jpeg"
                                :class="[item.loaded]"
                                mode="aspectFill"
                                lazy-load
                                @load="onImageLoad('cartList', index)"
                                @error="onImageError('cartList', index)"
                            ></image>
                            <view class="yticon icon-xuanzhong2 checkbox" :class="{ checked: item.checked }" @click="check('item', index)"></view>
                        </view>
                        <view class="item-right">
                            <text class="clamp title">{{ item.title }}</text>
                            <text class="attr">{{ item.attr_val }}</text>
                            <text class="price">¥{{ item.price }}</text>
                            <uni-number-box
                                class="step"
                                :min="1"
                                :max="item.stock"
                                :value="item.number > item.stock ? item.stock : item.number"
                                :isMax="item.number >= item.stock ? true : false"
                                :isMin="item.number === 1"
                                :index="index"
                                @eventChange="numberChange"
                            ></uni-number-box>
                        </view>
                        <text class="del-btn yticon icon-fork" @click="deleteCartItem(index)"></text>
                    </view>
                </block>
            </view>
        </view>
        <!-- 底部菜单栏 -->
        <view class="action-section">
            <view class="checkbox">
                <image :src="allChecked ? '/static/selected.png' : '/static/select.png'" mode="aspectFit" @click="check('all')"></image>
                <view class="clear-btn" :class="{ show: allChecked }" @click="clearCart">清空</view>
            </view>
            <view class="total-box">
                <text class="price">¥1000 {{ total }}</text>
                <!-- <text class="price">¥{{ total }}</text> -->
                <text class="coupon">
                    已优惠
                    <text>74.35</text>
                    元
                </text>
            </view>
            <button type="primary" class="no-border confirm-btn" @click="createOrder">去结算</button>
        </view>
    </view>
</template>

<style lang="scss">
.container {
    padding-bottom: 134rpx;
    /* 空白页 */
    .empty {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100vh;
        padding-bottom: 100rpx;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        background: #fff;
        image {
            width: 240rpx;
            height: 160rpx;
            margin-bottom: 30rpx;
        }
        .empty-tips {
            display: flex;
            font-size: $font-sm + 2rpx;
            color: $font-color-disabled;
            .navigator {
                color: $uni-color-primary;
                margin-left: 16rpx;
            }
        }
    }
    /* 购物车列表项 */
    .cart-item {
        display: flex;
        position: relative;
        padding: 30rpx 40rpx;
        .image-wrapper {
            width: 230rpx;
            height: 230rpx;
            flex-shrink: 0;
            position: relative;
            image {
                border-radius: 8rpx;
                width: 200rpx;
                height: 200rpx;
            }
        }
        .checkbox {
            position: absolute;
            left: -16rpx;
            top: -16rpx;
            z-index: 8;
            font-size: 44rpx;
            line-height: 1;
            padding: 4rpx;
            color: $font-color-disabled;
            background: #fff;
            border-radius: 50px;
        }
        .item-right {
            display: flex;
            flex-direction: column;
            flex: 1;
            overflow: hidden;
            position: relative;
            padding-left: 30rpx;
            .title,
            .price {
                font-size: $font-base + 2rpx;
                color: $font-color-dark;
                height: 40rpx;
                line-height: 40rpx;
            }
            .attr {
                font-size: $font-sm + 2rpx;
                color: $font-color-light;
                height: 50rpx;
                line-height: 50rpx;
            }
            .price {
                height: 50rpx;
                line-height: 50rpx;
            }
        }
        .del-btn {
            padding: 4rpx 10rpx;
            font-size: 34rpx;
            height: 50rpx;
            color: $font-color-light;
        }
    }
    .action-section {
        /* #ifdef H5 */
        margin-bottom: 100rpx;
        /* #endif */
        position: fixed;
        left: 30rpx;
        bottom: 30rpx;
        z-index: 95;
        display: flex;
        align-items: center;
        width: 690rpx;
        height: 100rpx;
        padding: 0 30rpx;
        background: rgba(255, 255, 255, 0.9);
        box-shadow: 0 0 20rpx 0 rgba(0, 0, 0, 0.5);
        border-radius: 16rpx;
        .checkbox {
            height: 52rpx;
            position: relative;
            image {
                width: 52rpx;
                height: 100%;
                position: relative;
                z-index: 5;
            }
        }
        .clear-btn {
            position: absolute;
            left: 26rpx;
            top: 0;
            z-index: 4;
            width: 0;
            height: 52rpx;
            line-height: 52rpx;
            padding-left: 38rpx;
            font-size: $font-base;
            color: #fff;
            background: $font-color-disabled;
            border-radius: 0 50px 50px 0;
            opacity: 0;
            transition: 0.2s;
            &.show {
                opacity: 1;
                width: 120rpx;
            }
        }
        .total-box {
            flex: 1;
            display: flex;
            flex-direction: column;
            text-align: right;
            padding-right: 40rpx;
            .price {
                font-size: $font-lg;
                color: $font-color-dark;
            }
            .coupon {
                font-size: $font-sm;
                color: $font-color-light;
                text {
                    color: $font-color-dark;
                }
            }
        }
        .confirm-btn {
            padding: 0 38rpx;
            margin: 0;
            border-radius: 100px;
            height: 76rpx;
            line-height: 76rpx;
            font-size: $font-base + 2rpx;
            background: $uni-color-primary;
            box-shadow: 1px 2px 5px rgba(217, 60, 93, 0.72);
        }
    }
    /* 复选框选中状态 */
    .action-section .checkbox.checked,
    .cart-item .checkbox.checked {
        color: $uni-color-primary;
    }
}
</style>
